一、创建一个小程序生产如下目录

1.app.json

app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。项目里边的 app.json 配置内容如下：

{  "pages":[    "pages/index/index",    "pages/warn/index",    "pages/scanresult/index",    "pages/billing/index",    "pages/my/index",    "pages/wallet/index",    "pages/charge/index",    "pages/logs/logs"  ],  "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#b9dd08",    "navigationBarTitleText": "单车",    "navigationBarTextStyle":"black"  }}

 

2.WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改.

/**app.wxss**/.container{    background-color: #f2f2f2;    height: 100vh;}.title{    background-color: #f2f2f2;    padding: 30rpx 0 30rpx 50rpx;    font-size: 28rpx;    color: #000;}.tapbar{    display: flex;    align-items: center;    justify-content: space-between;    background-color: #fff;    padding: 40rpx;}.btn-charge{    width: 90%;    background-color: #b9dd08;    margin: 40rpx auto 30rpx;    text-align: center;}

3.wxml文件， WXML 充当的就是类似 HTML 的角色。

       
          
        获取头像昵称     
             
              
        
         {
   {userInfo.nickName}}
            
         
        
          
       
        {
   {motto}}
         
      
     

4.js文件为逻辑交互文件。根据小程序的api编写，这里为部分代码

/ 页面加载  onLoad: function (options) {    // 1.获取定时器，用于判断是否已经在计费    this.timer = options.timer;    // 2.获取并设置当前位置经纬度    wx.getLocation({      type: "gcj02",      success: (res) => {        this.setData({          longitude: res.longitude,          latitude: res.latitude        })      }    });    // 3.设置地图控件的位置及大小，通过设备宽高定位    wx.getSystemInfo({      success: (res) => {        this.setData({          controls: [{            id: 1,            iconPath: '/images/location.png',            position: {              left: 20,              top: res.windowHeight - 80,              width: 50,              height: 50            },            clickable: true          },          {            id: 2,            iconPath: '/images/use.png',            position: {              left: res.windowWidth/2 - 45,              top: res.windowHeight - 100,              width: 90,              height: 90            },            clickable: true          },          {            id: 3,            iconPath: '/images/warn.png',            position: {              left: res.windowWidth - 70,              top: res.windowHeight - 80,              width: 50,              height: 50            },            clickable: true          },          {            id: 4,            iconPath: '/images/marker.png',            position: {              left: res.windowWidth/2 - 11,              top: res.windowHeight/2 - 45,              width: 22,              height: 45            },            clickable: true          },          {            id: 5,            iconPath: '/images/avatar.png',            position: {              left: res.windowWidth - 68,              top: res.windowHeight - 155,              width: 45,              height: 45            },            clickable: true          }]        })      }    });    // 4.请求服务器，显示附近的单车，用marker标记    wx.request({      url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/biyclePosition',      data: {},      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT      // header: {}, // 设置请求的 header      success: (res) => {          this.setData({            markers: res.data.data          })      },      fail: function(res) {        // fail      },      complete: function(res) {        // complete      }    })  },